<template>
  <div>
    <MyHeader title="购物车案例" color="pink" background="green"></MyHeader>
    <div class="main">
      <MyGoods
        v-for="item in list"
        :key="item.id"
        :item="item"
        :id="item.id"
        :count="item.goods_count"
      ></MyGoods>
    </div>
    <MyFooter :list="list"></MyFooter>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyFooter from './components/MyFooter.vue'
import MyGoods from './components/MyGoods.vue'
export default {
  data() {
    return {
      list: [],
    }
  },
  components: { MyHeader, MyFooter, MyGoods },
  created() {
    this.$axios({
      url: '/api/cart',
    }).then((res) => {
      const {
        data: { list },
      } = res
      this.list = list
    })
  },
}
</script>

<style>
.main {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>
